$(document).ready(chalkboard);

function chalkboard(){
	var isSign = false;
	$('#chalkboard').remove();
	$('.stage').prepend('<img src="img/qm-bg.jpg" id="pattern" width=50 height=50>');
	$('.stage').prepend('<canvas id="chalkboard"></canvas>');
	
	var canvas = document.getElementById("chalkboard");
	$('#chalkboard').css('width',$('.stage').width());
	$('#chalkboard').css('height',$('.stage').height());
	canvas.width = $('.stage').width();
	canvas.height = $('.stage').height();
	
	var ctx = canvas.getContext("2d");
	
	var width = canvas.width;
	var height = canvas.height;
	var mouseX = 0;
	var mouseY = 0;
	var mouseD = false;
	var eraser = false;
	var xLast = 0;
	var yLast = 0;
	var brushDiameter = 3;
	var eraserWidth = 50;
	var eraserHeight = 100;
	
	$('#chalkboard').css('cursor','none');
	document.onselectstart = function(){ return false; };
	ctx.fillStyle = 'rgba(255,255,255,0.5)';	
	ctx.strokeStyle = 'rgba(255,255,255,0.5)';	
    ctx.lineWidth = brushDiameter;
	ctx.lineCap = 'round';

	var patImg = document.getElementById('pattern');

	$('.stage')[0].addEventListener('touchmove', function(evt) {
        var touch = evt.touches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY-$(".stage").offset().top;
        if (mouseY < height && mouseX < width) {
            evt.preventDefault();
              //隐藏默认文字
            //$('.chalk').css('display', 'none');
            if (mouseD) {
                draw(mouseX, mouseY);
            }
        }
    }, false);
    $('.stage')[0].addEventListener('touchstart', function(evt) {
        //evt.preventDefault();
        var touch = evt.touches[0];
        mouseD = true;
        mouseX = touch.pageX;
        mouseY = touch.pageY-$(".stage").offset().top;
        xLast = mouseX;
        yLast = mouseY;
        draw(mouseX + 1, mouseY + 1);
    }, false);
    $('.stage')[0].addEventListener('touchend', function(evt) {
    	isSign = true;
        mouseD = false;
    }, false);
    $('#chalkboard').css('cursor','none');
	ctx.fillStyle = 'rgba(255,255,255,0.5)';	
	ctx.strokeStyle = 'rgba(255,255,255,0.5)';	
    ctx.lineWidth = brushDiameter;
	ctx.lineCap = 'round';
	
	$('.stage').mousemove(function(evt){
		mouseX = evt.pageX;
		mouseY = evt.pageY;
		if(mouseY<height && mouseX<width){
			$('.chalk').css('left',(mouseX-0.5*brushDiameter)+'px');
			$('.chalk').css('top',(mouseY-0.5*brushDiameter)+'px');
			if(mouseD){
				if(eraser){
					erase(mouseX,mouseY);
				}else{
					draw(mouseX,mouseY);
					}
				}
		}else{
			$('.chalk').css('top',height-10);
		}
	});
	
	$(".stage").mousedown(function(evt){
		mouseD = true;
		xLast = mouseX;
		yLast = mouseY;
	});

	$(".stage").mouseup(function(evt){
		isSign = true;
		mouseD = false;
	});

	$(".stage").keyup(function(evt){
		if(evt.keyCode == 32){
			ctx.clearRect(0,0,width,height);
			isSign = false;
			layPattern();
		}
	});

	//document.oncontextmenu = function() {return false;};
         
	function draw(x,y){
		ctx.strokeStyle = 'rgba(0,0,0,1)';
		ctx.beginPath();
  		ctx.moveTo(xLast, yLast);		
  		ctx.lineTo(x, y);
  		ctx.stroke();

		xLast = x;
		yLast = y;
	}

	function erase(x,y){
		ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);
	}

	$('.save').click(function(evt){
		if(!isSign){
			alert('请手写签名');
			return;
		}
		var imgCanvas = document.createElement('canvas');
		var imgCtx = imgCanvas.getContext("2d");
		var pattern = imgCtx.createPattern(patImg,'repeat');

		imgCanvas.width = width;
		imgCanvas.height = height;

		imgCtx.fillStyle = pattern;
		imgCtx.rect(0,0,width,height);
		imgCtx.fill();


		var layimage = new Image;
		layimage.src = canvas.toDataURL("image/png");
		$(".name-box").html(layimage)
		setTimeout(function(){
			imgCtx.drawImage(layimage,0,0);
			var compimage = imgCanvas.toDataURL("image/png");
			$(".name-box").html('<img src='+compimage+'>');
		}, 500);
		$("#mask").removeClass("show");
		$(".pop-dialog").removeClass("show");
		ctx.clearRect(0,0,width,height);
		isSign = false
	});


//	$(window).resize(function(){
//		chalkboard();
//	});
	
	$(".clear").click(function(){
		ctx.clearRect(0,0,width,height);
		isSign = false
	});
	
	$(".dialog-close").click(function(){
		$("#mask").removeClass("show");
		$(".pop-dialog").removeClass("show");
		$(".clear").click();
	});
} 